<template>
  <button @click="hello += '!'">点我打招呼</button>
  <h1>内心独白:{{job.data.msg}}</h1>
  <button @click = "job.name = '后端'">点击修改我的工作</button>
  <button @click="job.salary = '10k'">点我跳槽加薪</button>
  <button @click="job.data.msg = '给我一万 我要猛干'">点击改变内心独白</button>
</template>

<script>
//引入watch函数
import {reactive, watchEffect} from "vue";

export default {
  name: "my-demo",
  setup() {
    let job = reactive({
      data:{
        msg:'妈的，前后端老子都干 就给5k 干个蛋啊'
      }
    })

    //没有参数只有一个回调函数 所依赖的数据发生改变 才会调用watchEffect函数
    watchEffect(() => {
      const x1 = job.data.msg;
      console.log('job改变了',x1);
    })

    return {
      job
    }
  }
}
</script>

<style scoped>

</style>